<template>
	<view style="min-height: 100vh;">
		<view class="header tn-padding" style="min-height: 300rpx;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="">
					<view class="" style="color: #fff;">可提现金额（元）</view>
					<view class="" style="color: #fff;font-size: 52rpx;margin-top: 30rpx;">
						{{ userInfos.commission || '0.00' }}
					</view>
				</view>
				<view class=""
					style="border: 1rpx solid #fff;padding: 10rpx 30rpx;border-radius: 30rpx;font-size: 28rpx;color:#fff;" @click="withdrawLog">
					提现记录</view>
			</view>
		</view>
		<view class="" style="display: flex;justify-content: center;">
			<view class="draw-card">
				<view class="">提现金额</view>

				<view class="" style="display: flex;align-items: center;margin-top: 30rpx">
					<view class="" style="font-size: 48rpx;">￥</view>
					<tn-input v-model="money" type="number" autoHeight placeholder="请输入提现金额" />
				</view>
				<view class="" style="height: 5rpx;background: #f8f8f8;;margin-top: 20rpx;"></view>
				<view class="" style="margin-top: 30rpx;font-size: 28rpx;">
					<view class="" style="display:flex;justify-content: space-between;">
						<view class="">提现至</view>
						<view class="" style="color: #999999;display: flex;align-items: center;" @click="pay">
							<view class="">{{currentMode.title?currentMode.title:'请选择提现方式'}}</view>
							<text class="tn-icon-right"></text>
						</view>
					</view>
					<view style="display: flex;color: #999999;justify-content: space-between;margin-top: 20rpx;"
						v-if="form.type && detail">
						<view v-if="type && detail.code==1">{{detail.data.account_header}} |
							{{ detail.data.account_name }}</view>
						<view v-if="type && detail.code==0">暂无提现账户</view>
						<view v-if="type && detail.code==0"
							style="background: rgba(233, 180, 97, 0.2);color: #e9b461;padding: 8rpx 25rpx;border-radius: 30rpx;font-size: 26rpx;"
							@click="add">添加</view>
						<view v-if="type && detail.code==1"
							style="background: rgba(233, 180, 97, 0.2);color: #e9b461;padding: 8rpx 25rpx;border-radius: 30rpx;font-size: 26rpx;"
							@click="upshowWechat">修改</view>
					</view>
					<view class=""
						style="margin:80rpx 0;color: #fff;font-size: 30rpx;background: #e9b461;padding: 20rpx;text-align: center;border-radius: 50rpx;"
						@click="back">确认提现</view>
				</view>
			</view>

		</view>
		<view class="" style="display: flex;justify-content: center;margin-top: 130rpx;">
			<view class="draw-card">
				<view class="">提现说明</view>
				<view class="" v-for="(item,index) in list" :key="index" style="font-size: 24rpx;margin-top: 20rpx;color: #999999;">
					{{item.title}}
				</view>
			</view>

		</view>
		<tn-popup v-model="showWechat" mode="bottom" :borderRadius="30">
			<view style="margin: 50rpx;font-family: 38rpx;font-weight: bold;"> {{ currentMode.msg }} </view>
			<tn-form :model="form" ref="form" style="padding:20rpx 20rpx 20rpx 20rpx;">
				<view class="" style="padding: 0 30rpx;">
					<tn-form-item label="真实姓名" :labelWidth="130"
						v-if="currentMode.type=='wechat' || currentMode.type=='alipay'">
						<tn-input v-model="form.account_name" placeholder="请输入您的真实姓名" />
					</tn-form-item>
					<tn-form-item label="支付宝" :labelWidth="130" v-if="currentMode.type=='alipay'">
						<tn-input v-model="form.account_no" placeholder="请输入支付宝 邮箱/手机号" />
					</tn-form-item>
					<tn-form-item label="持卡人" :labelWidth="130" v-if="currentMode.type=='bank'">
						<tn-input v-model="form.account_name" placeholder="请输入持卡人" />
					</tn-form-item>
					<tn-form-item label="开户行" :labelWidth="130" v-if="currentMode.type=='bank'">
						<tn-input v-model="form.account_header" placeholder="请输入开户行" />
					</tn-form-item>
					<tn-form-item label="银行卡号" :labelWidth="130" v-if="currentMode.type=='bank'">
						<tn-input v-model="form.account_no" placeholder="请输入银行卡号" />
					</tn-form-item>
				</view>
			</tn-form>
			<view class="" style="padding: 20rpx;margin: 80rpx 0 40rpx 0;">
				<view class="" style="width: 100%;background: #e9b461;color: #fff;margin-top: 30rpx;border-radius: 20rpx;text-align: center;padding: 20rpx 0;" @click="save">保存</view>
			</view>
		</tn-popup>

		<tn-popup v-model="show" mode="bottom" :borderRadius="30">
			<view class="" style="padding: 60rpx 30rpx;">
				<view style="font-weight: bold;padding-bottom: 50rpx;">选择提现方式</view>
				<view class="" style="width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;width: 100%;margin-top: 30rpx;"
						@click="withdrawMode(index)" v-for="(item,index) in modeList" :key="index">
						<view class="" style="display: flex;align-items: center;">
							<image :src="item.imageUrl" mode="widthFix" style="width: 40rpx;margin: 0 20rpx;"></image>
							<view class="tn-text-md">{{item.title}}</view>
						</view>
						<image
							:src="withdraw==index?'https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png':'https://oss.taoding1688.com/static/uniapp/static/commission/radio.png'"
							mode="widthFix" style="width: 50rpx"></image>

					</view>
					<view class="" style="height: 2rpx;background: rgba(223, 223, 223, 0.5);margin: 20rpx 0;"></view>
				</view>
				<view class="" style="width: 100%;">
				
						<view class="" style="width: 100%;background: #e9b461;color: #fff;margin-top: 30rpx;border-radius: 20rpx;text-align: center;padding: 20rpx 0;" @click="submit">确定</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>


<script>
	import {
		getShopUserAccount,
		getShopUserAccountSave,
		getShopWithdrawApply,
		getUserProfile,
		getCardocrInfo
	} from "@/apis/index.js"
	export default {
		data() {
			return {
				form: {
					account_name: ''
				},
				showWechat: false,
				detail: {},
				type: '',
				show: false,
				money: '',
				withdraw: null,
				currentMode: {},
				modeList: [{
						title: '微信零钱',
						aurl: 'https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png',
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/radio.png',
						imageUrl: 'https://oss.taoding1688.com/static/uniapp/static/commission/wx.jpg',
						type: 'wechat',
						msg: '绑定微信'
					},
					{
						title: '支付宝余额',
						aurl: 'https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png',
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/radio.png',
						imageUrl: 'https://oss.taoding1688.com/static/uniapp/static/commission/zfb.jpg',
						type: 'alipay',
						msg: '绑定支付宝'
					},
					{
						title: '银行卡转账',
						aurl: 'https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png',
						url: 'https://oss.taoding1688.com/static/uniapp/static/commission/radio.png',
						imageUrl: '../../static/bank.png',
						type: 'bank',
						msg: '绑定银行卡'
					}
				],
				list: [{
						title: '1.单次提现金额 最少 100.00元; 最多 1000.00元;'
					},
					{
						title: '2.每月最多可提现 10 次;'
					},
					{
						title: '3.每次收取提现手续费 1%;'
					},
					{
						title: '4.提现申请后将审核后到账, 到账结果请查收对应渠道服务通知;'
					},
					{
						title: '5.如有疑问请及时联系客服.'
					}
				],
				status:''

			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				getCardocrInfo().then(res => {
					if (res.code == 1) {
						this.status=res.data.status
					}
				})
			},
			getUserInfo() {
				getUserProfile().then(res => {
					this && this.$tn.vuex('userInfos', res.data)
				})
			},
			withdrawLog(){
				uni.navigateTo({
					url:'/discountPage/withdrawLog/withdrawLog'
				})
			},
			//提现
			async back(){
				if (this.status==2) {
					if (this.form.type) {
						if (this.money>=10) {
							this.form.money=this.money
							let res=await getShopWithdrawApply(this.form)
							console.log(res,'-----------------------')
							this.getUserInfo()
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							
						}else{
							uni.showToast({
								title:'提现金额应大于100元',
								icon:'none'
							})
						}
					}else{
						uni.showToast({
							title:'请选择提现方式',
							icon:'none'
						})
					}
				}else{
					uni.showToast({
						title:'请先完成实名认证',
						icon:'none'
					})
				}
				
				
				
				
			},
			add() {
				this.showWechat = true
				// this.form = {}
				// this.form.type = this.currentMode.type
			},

			visible() {
				if (this.form.type == 'wechat') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
						return
					}
				}
				if (this.form.type == 'alipay') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_no) {
						uni.showToast({
							title: '请输入支付宝号',
							icon: 'none'
						})
						return
					}
				}
				if (this.form.type == 'bank') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入持卡人',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_header) {
						uni.showToast({
							title: '请输入开户行',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_no) {
						uni.showToast({
							title: '请输入银行卡号',
							icon: 'none'
						})
						return
					}
				}
			},
			upshowWechat() {
				this.showWechat = true
				this.form=JSON.parse(JSON.stringify(this.detail.data))
			},
			pay() {
				this.show = true
			},
			withdrawMode(e) {
				this.withdraw = e
				this.type = this.modeList[e].type
				
			},
			//确定按钮
			async submit() {
				uni.hideLoading()
				this.currentMode = this.modeList[this.withdraw]
				this.form.type = this.currentMode.type
				let res = await getShopUserAccount(this.currentMode.type)
				this.detail = res
				
				if (res.code==1) {
					this.form = JSON.parse(JSON.stringify(this.detail.data))
				}
				this.show = false
				uni.hideLoading()
			},
			save() {
				if (this.form.type == 'wechat') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
						return
					}
				}
				if (this.form.type == 'alipay') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_no) {
						uni.showToast({
							title: '请输入支付宝号',
							icon: 'none'
						})
						return
					}
				}
				if (this.form.type == 'bank') {
					if (!this.form.account_name) {
						uni.showToast({
							title: '请输入持卡人',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_header) {
						uni.showToast({
							title: '请输入开户行',
							icon: 'none'
						})
						return
					}
					if (!this.form.account_no) {
						uni.showToast({
							title: '请输入银行卡号',
							icon: 'none'
						})
						return
					}
				}
				getShopUserAccountSave(this.form).then(res => {
					if (res.code == 1) {
						this.submit()
						this.showWechat = false
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})


			}


		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url('https://oss.taoding1688.com/static/uniapp/static/commission/withdraw_bg.png') no-repeat, linear-gradient(90deg, #e9b461, rgba(233, 180, 97, 0.6))
	}

	.color999 {
		color: #999;
	}

	.draw-card {
		background: #fff;
		min-height: 300rpx;
		width: 90%;
		margin-top: -100rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}
</style>